<template>
  <div class="list_form">
    <el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm">
      <div class="form_flex">
        <el-form-item label="标题">
          <el-input style="width: 260px" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.cid" placeholder="请选择分类">
            <el-option
              v-for="(v, i) in classify"
              :label="v.name"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用时">
          <el-input-number v-model="form.time" :min="1" :max="10"></el-input-number>
        </el-form-item>
      </div>
      <el-form-item label="内容">
        <markdown-editor style=" width: 96%;" v-model="form.content" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSave">立即创建</el-button>
        <el-button @click="resetForm('form')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MarkdownEditor from "@/components/MarkdownEditor";
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions("list", ["addList", "EditList"]),
    ...mapMutations("list", ["SET_DRAWER", "SET_FORM"]),
    async handleSave() {
      if (this.form.id) {
        await this.EditList(this.form);
      } else {
        await this.addList(this.form);
      }
      this.resetForm();
    },
    resetForm() {
      this.SET_DRAWER(this.drawer);
      this.SET_FORM({
        time: 1,
        content: "",
        author: "situ",
      });
    },
  },
  computed: {
    ...mapState("list", ["classify", "drawer", "form"]),
  },
  components: {
    MarkdownEditor,
  },
};
</script>

<style scoped>
.form_flex {
  display: flex;
  /* justify-content: sp; */
}
/deep/ .el-input-number {
  width: 120px;
}

/deep/ .el-select {
  width: 120px;
}


</style>
